<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>固定资产管理 - 人力资源管理系统</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .search-form {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 24px;
            margin-bottom: 16px;
        }
        .search-form-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
        .form-item {
            display: flex;
            align-items: center;
        }
        .form-label {
            font-size: 14px;
            color: var(--text-primary);
            margin-right: 8px;
            flex-shrink: 0;
            width: 70px;
            text-align: right;
        }
        .form-input, .form-select {
            flex: 1;
            height: 32px;
            padding: 0 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            background: #fff;
            width: calc(100% - 78px);
        }
        .search-buttons {
            display: flex;
            gap: 16px;
        }
        .action-buttons {
            margin-bottom: 16px;
            display: flex;
            gap: 12px;
        }
        .table-container {
            background: #fff;
            border-radius: 4px;
            border: 1px solid var(--border-color);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            min-width: 1500px;
        }
        th, td {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            text-align: left;
        }
        th {
            background: #fafafa;
            font-weight: 600;
            color: #232a3b;
        }
        tr:hover {
            background: #fafafa;
        }
        .table-actions button {
            padding: 4px 12px;
            border: none;
            border-radius: 4px;
            background: #40a9ff;
            color: #fff;
            cursor: pointer;
            font-size: 12px;
            margin-right: 8px;
        }
        .table-actions button:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="layout">
        <div class="sidebar" id="sidebar"></div>
        <div class="main">
            <div class="topbar">
                <div class="title">固定资产管理</div>
                <div class="user">
                    <span>管理员</span>
                    <img src="https://via.placeholder.com/32x32.png?text=U" alt="用户头像">
                </div>
            </div>
            <div class="content">
                <div class="search-form">
                    <div class="search-form-grid">
                        <div class="form-item">
                            <label class="form-label">资产编号</label>
                            <input type="text" class="form-input" placeholder="请输入资产编号">
                        </div>
                        <div class="form-item">
                            <label class="form-label">资产名称</label>
                            <input type="text" class="form-input" placeholder="请输入资产名称">
                        </div>
                        <div class="form-item">
                            <label class="form-label">所属部门</label>
                            <select class="form-select">
                                <option value="">全部部门</option>
                                <option value="hr">人力资源部</option>
                                <option value="it">信息技术部</option>
                                <option value="finance">财务部</option>
                            </select>
                        </div>
                        <div class="form-item search-buttons">
                            <button type="button" class="btn btn-primary">搜索</button>
                            <button type="button" class="btn btn-default">重置</button>
                        </div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="btn btn-primary" id="addAssetBtn">新增资产</button>
                    <button class="btn btn-default">批量导入</button>
                    <button class="btn btn-default">批量导出</button>
                    <button class="btn btn-default">批量打印</button>
                </div>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>资产编号</th>
                                <th>资产名称</th>
                                <th>所属部门</th>
                                <th>资产类别</th>
                                <th>购置日期</th>
                                <th>使用状态</th>
                                <th>负责人</th>
                                <th>所属工位</th>
                                <th>领用员工</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>FA-001</td>
                                <td>联想笔记本</td>
                                <td>信息技术部</td>
                                <td>电子设备</td>
                                <td>2023-01-15</td>
                                <td>在用</td>
                                <td>王五</td>
                                <td>WS-001</td>
                                <td>张三</td>
                                <td class="table-actions">
                                    <button class="edit-btn">编辑</button>
                                    <button>删除</button>
                                    <button>打印</button>
                                </td>
                            </tr>
                            <!-- 更多资产数据 -->
                        </tbody>
                    </table>
                </div>
                <!-- 新增/编辑资产弹窗 -->
                <div id="assetModal" style="display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1000;background:rgba(0,0,0,0.3);">
                    <div style="background:#fff;width:420px;margin:80px auto 0 auto;padding:32px 24px;border-radius:8px;position:relative;">
                        <div style="font-size:18px;font-weight:600;margin-bottom:24px;" id="assetModalTitle">新增资产</div>
                        <form id="assetForm">
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">资产编号</label>
                                <input type="text" name="code" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">资产名称</label>
                                <input type="text" name="name" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">所属部门</label>
                                <select name="department" style="width:266px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                                    <option value="">请选择</option>
                                    <option value="hr">人力资源部</option>
                                    <option value="it">信息技术部</option>
                                    <option value="finance">财务部</option>
                                </select>
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">资产类别</label>
                                <select name="category" style="width:266px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                                    <option value="">请选择</option>
                                    <option value="电子设备">电子设备</option>
                                    <option value="办公家具">办公家具</option>
                                    <option value="交通工具">交通工具</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">所属工位</label>
                                <select name="workstation" style="width:266px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                                    <option value="">请选择</option>
                                    <option value="WS-001">前台A1（WS-001）</option>
                                    <option value="WS-002">开发区B2（WS-002）</option>
                                    <!-- 可动态生成所有工位选项 -->
                                </select>
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">领用员工</label>
                                <input type="text" name="employee" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;" placeholder="请输入员工姓名">
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">购置日期</label>
                                <input type="date" name="purchaseDate" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">使用状态</label>
                                <select name="status" style="width:266px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                                    <option value="">请选择</option>
                                    <option value="inuse">在用</option>
                                    <option value="idle">闲置</option>
                                    <option value="repair">维修中</option>
                                </select>
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">负责人</label>
                                <input type="text" name="manager" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                            </div>
                            <div style="text-align:right;">
                                <button type="button" id="assetModalCancel" style="margin-right:16px;padding:6px 24px;">取消</button>
                                <button type="submit" style="padding:6px 24px;background:#40a9ff;color:#fff;border:none;border-radius:4px;">保存</button>
                            </div>
                        </form>
                        <span id="assetModalClose" style="position:absolute;right:16px;top:16px;cursor:pointer;font-size:20px;">×</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 弹窗控制
        const assetModal = document.getElementById('assetModal');
        const addAssetBtn = document.getElementById('addAssetBtn');
        const assetCloseBtn = document.getElementById('assetModalClose');
        const assetCancelBtn = document.getElementById('assetModalCancel');
        const assetModalTitle = document.getElementById('assetModalTitle');
        const assetForm = document.getElementById('assetForm');
        let isAssetEdit = false;

        addAssetBtn.onclick = function() {
            assetModalTitle.textContent = '新增资产';
            assetForm.reset();
            assetModal.style.display = 'block';
            isAssetEdit = false;
        };
        document.querySelectorAll('.edit-btn').forEach(function(btn){
            btn.onclick = function() {
                assetModalTitle.textContent = '编辑资产';
                // 这里可根据实际数据填充表单
                assetForm.reset();
                assetModal.style.display = 'block';
                isAssetEdit = true;
            };
        });
        assetCloseBtn.onclick = assetCancelBtn.onclick = function() {
            assetModal.style.display = 'none';
        };
        assetForm.onsubmit = function(e) {
            e.preventDefault();
            // 这里可添加保存逻辑
            assetModal.style.display = 'none';
        };
    </script>
</body>
    <script>
      // 动态加载 sidebar.html
      fetch('components/sidebar.html')
        .then(response => response.text())
        .then(html => {
          document.getElementById('sidebar').innerHTML = html;
        });
    </script>
</html>